<template>
    <div class="departments">
        组织架构
        <el-tree
            icon-class=" "
            :data="tree2"
            :props="{ children: 'departments', label: 'name' }"
        >
            <template slot-scope="{ node, data }">
                <div class="tree-node">
                    <i
                        v-if="data.departments.length"
                        :class="node.expanded ? 'el-icon-remove-outline' : 'el-icon-circle-plus-outline'"
                    />
                    <div class="name" :style="`text-indent: ${ data.departments.length ? 0 : 1 }em`" >
                        {{ data.name }}
                    </div>
                    <el-dropdown @command="(cmd) => onOperatorClick(cmd, data)">
                        <span class="el-dropdown-link">
                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="ADD_CHILD_DEPARTMENT">添加子部门</el-dropdown-item>
                            <el-dropdown-item command="EDIT_DEPARTMENT">修改</el-dropdown-item>
                            <el-dropdown-item command="DELETE_DEPARTMENT">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </template>
        </el-tree>

        <el-dialog
            :title="params.id ? '编辑部门' : '新增子部门'"
            :visible.sync="visible"
            width="500px"
        >
            <el-form
                :model="params"
                label-width="100px"
            >
                <el-form-item label="部门名称" prop="name">
                    <el-input
                        v-model="params.name"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item label="部门编码" prop="code">
                    <el-input
                        v-model="params.code"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item label="负责人" prop="manager">
                    <el-select v-model="params.manager">
                        <!-- 有锅给后端 -->
                        <el-option
                            v-for="manager in managerList"
                            :key="manager.id"
                            :label="manager.username"
                            :value="manager.username"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门介绍" prop="introduce">
                    <el-input
                        type="textarea"
                        v-model="params.introduce"
                        autocomplete="off"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onOk">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script src="./main.js"></script>

<style lang="less" scoped>
    .tree-node {
        display: flex;
        align-items: center;
        width: 100%;

        .name {
            flex: 1;
        }
    }
</style>
